<template>
  <view class="cs-tag" @click="click">
    <wd-tag
      :type="type"
      :round="round"
      :custom-class="classNames('cs-tag__item', { active: isActive, small: isSmall })"
      :bg-color="bgColor"
      :color="color"
    >
      <slot></slot>
    </wd-tag>
  </view>
</template>

<script lang="ts" setup>
import classNames from 'classnames'
import type { TagType } from 'wot-design-uni/components/wd-tag/types'

defineOptions({
  name: 'cs-tag',
  options: {
    addGlobalClass: true,
    virtualHost: true, // page con't use this
    styleIsolation: 'shared',
  },
})

const props = defineProps<{
  type?: TagType
  round?: boolean
  isActive?: boolean
  isSmall?: boolean

  bgColor?: string
  color?: string
}>()

const isActive = toRef(props, 'isActive')
const isSmall = toRef(props, 'isSmall')

const emit = defineEmits<{ click: [] }>()

const click = () => {
  emit('click')
}
</script>

<style lang="scss" scoped></style>

<style lang="scss">
.cs-tag {
  display: inline-flex;
}

.cs-tag__item {
  &.active {
    color: #fff !important;
    background-color: var(--wot-tag-primary-color, var(--wot-color-theme, #4d80f0)) !important;
  }

  &.small {
    padding: 4px 6px !important;
    font-size: 8px !important;
  }
}
</style>
